<template>
  <div class="SearchIndex">
    <h1 class="title">
      搜索{{ ` "${$route.query.key}"` }},找到了{{ total }}{{ searchName }}
    </h1>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="单曲" name="song">
        <div class="playlist">
          <ch-musiclist :serachText="search" :playlist="songs" />
          <el-pagination
            v-if="total > limit"
            background
            layout="prev, pager, next"
            :current-page="page"
            :total="total"
            @current-change="songsChange"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="歌手" name="singer">
        <div class="singer-box">
          <ch-singerlist :singer="singer" />
          <el-pagination
            v-if="total > limit"
            background
            layout="prev, pager, next"
            :current-page="page"
            :total="total"
            @current-change="singerChange"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="专辑" name="albums">
        <div class="albums-box">
          <ch-albumlist :albums="albums" />
          <el-pagination
            v-if="total > limit"
            background
            layout="prev, pager, next"
            :current-page="page"
            :total="total"
            @current-change="albumsChange"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="视频" name="video">
        <div class="videoist-box">
          <ch-videolist :videos="videos" />
          <el-pagination
            v-if="total > limit"
            background
            layout="prev, pager, next"
            :current-page="page"
            :total="total"
            @current-change="videosChange"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="歌单" name="playlist">
        <div class="playlist">
          <ch-playlist :playlists="playlists" />
          <el-pagination
            v-if="total > limit"
            background
            layout="prev, pager, next"
            :current-page="page"
            :total="total"
            @current-change="playlistChange"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getSearchContent } from "@/api/search";
import { rankSongDetail } from "@/utils/detail";
import MusicList from "@/views/details/components/musiclist";
import SingerList from "./components/singerlist";
import AlbumList from "./components/albumlist";
import PlayList from "./components/playlist";
import VideoList from "./components/videolist";
export default {
  name: "SearchIndex",
  components: {
    "ch-musiclist": MusicList,
    "ch-singerlist": SingerList,
    "ch-albumlist": AlbumList,
    "ch-playlist": PlayList,
    "ch-videolist": VideoList
  },
  props: {},
  data() {
    return {
      search: "search",
      activeName: "song",
      searchName: "首单曲",
      type: 1,
      limit: 100,
      page: 1,
      songs: [], // 单曲
      total: 100, // 搜索数量
      singer: [], // 歌手
      albums: [], // 专辑
      videos: [], //视频
      playlists: [] //歌单
    };
  },
  computed: {},
  watch: {
    $route() {
      this.getSearchContent();
    }
  },
  created() {
    this.getSearchContent();
  },
  mounted() {},
  methods: {
    handleClick(e) {
      if (e.name == "song") {
        this.type = 1;
        this.limit = 100;
        this.searchName = "首单曲";
        this.getSearchContent();
      } else if (e.name == "singer") {
        this.type = 100;
        this.limit = 30;
        this.searchName = "个歌手";
        this.getSearchContent();
      } else if (e.name == "albums") {
        this.type = 10;
        this.limit = 30;
        this.searchName = "张专辑";
        this.getSearchContent();
      } else if (e.name == "video") {
        this.type = 1014;
        this.limit = 32;
        this.searchName = "个视频";
        this.getSearchContent();
      } else if (e.name == "playlist") {
        this.type = 1000;
        this.limit = 30;
        this.searchName = "个歌单";
        this.getSearchContent();
      }
    },
    // 获取搜索结果
    async getSearchContent() {
      this.showLoading();
      this.songs = [];
      const data = await getSearchContent({
        keywords: this.$route.query.key,
        offset: (this.page - 1) * this.limit,
        limit: this.limit,
        type: this.type
      });
      if (data.status == 200) {
        this.closeLoading();
      }
      if (this.type == 1) {
        this.total = data.data.result.songCount;
        data.data.result.songs.forEach(val => {
          let song = new rankSongDetail(val);
          this.songs.push(song);
        });
      } else if (this.type == 100) {
        this.total = data.data.result.artistCount;
        this.singer = data.data.result.artists;
      } else if (this.type == 10) {
        this.total = data.data.result.albumCount;
        this.albums = data.data.result.albums;
      } else if (this.type == 1014) {
        this.total = data.data.result.videoCount;
        this.videos = data.data.result.videos;
      } else if (this.type == 1000) {
        this.total = data.data.result.playlistCount;
        this.playlists = data.data.result.playlists;
      }
    },
    // 单曲分页
    currentChange(page) {
      this.$emit("currentChange", page);
      document.querySelector(".el-main").scrollTop = 0;
      this.page = page;
      this.getSearchContent();
    },
    songsChange(page) {
      this.currentChange(page);
    },
    singerChange(page) {
      this.currentChange(page);
    },
    albumsChange(page) {
      this.currentChange(page);
    },
    playlistChange(page) {
      this.currentChange(page);
    },
    videosChange(page) {
      this.currentChange(page);
    }
  }
};
</script>

<style scoped lang="scss">
/deep/.el-tabs__item {
  width: 180px;
  text-align: center;
}
.playlist,
.singer-box,
.albums-box,
.playlist,
.videoist-box {
  margin-bottom: 100px;
}

.title {
  padding: 20px 0;
  font-size: 14px;
  color: #a2a2a2;
}
.el-pagination {
  text-align: center;
}
</style>
